<template>
  <div class="main app-config-edit">
    <section>
      <el-form :model="formData" size="medium" ref="form" label-width="150px">
        <el-form-item label="标题:" prop="title" :rules="commonRules.notNullRule">
          <el-input v-model="formData.title"></el-input>
        </el-form-item>
        <el-form-item label="配置类型:" prop="propertiesType" :rules="commonRules.notNullRule">
          <el-select v-model="formData.propertiesType" :disabled="isEdit">
            <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.typeKey"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="消息推送:" prop="messagePushStatus">
          <el-radio v-model="formData.messagePushStatus" :label="0">不推送</el-radio>
          <el-radio v-model="formData.messagePushStatus" :label="1">推送全部</el-radio>
        </el-form-item>
        <el-form-item label="内容:" prop="content" style="max-width: 1200px">
          <vue-json-editor
            v-model="formData.content"
            :show-btns="false"
            :exapndedOnStart="true"
            mode="code"
            :modes="['code']"
            @json-change="onJsonChange"/>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" :loading="btnLoading" plain @click="save">保 存</el-button>
        </el-form-item>
      </el-form>
    </section>
  </div>
</template>
<script>
import vueJsonEditor from 'vue-json-editor'
export default {
  props: {
    id: {
      default: ''
    }
  },
  components: {
    vueJsonEditor
  },
  data(){
    return {
      isEdit: this.$route.name === 'appConfigEdit',
      typeList: [],
      formData: {
        propertiesId: '',
        title: '',
        propertiesType: '',
        messagePushStatus: 0,
        content: {},
      },
      btnLoading: false
    }
  },
  created(){
    this.fetchData()
    this.fetchTypeData()
  },
  methods: {
    fetchData(){
      if(this.id){
        this.request({
          url: '/acm/client-properties/get',
          method: 'get',
          params: {
            propertiesId: this.id
          }
        }).then(({data}) => {
          if(data){
            this.formData = {
              ...data,
              content: JSON.parse(data.content || '{}')
            }
          }
        }).catch(err => {
          console.log(err);
        });
      }
    },
    fetchTypeData(){
      this.request({
        url: '/acm/client-properties-type/list',
        method: 'get'
      }).then(({data}) => {
        this.typeList = data || []
      }).catch(err => {
        console.log(err);
      });
    },
    onJsonChange(value){
      this.formData.content = value
    },
    save(){
      this.$refs.form.validate(valid => {
        if(!valid){
          return
        }

        this.btnLoading = true
        this.request({
          url: this.isEdit ? '/acm/client-properties/update':'/acm/client-properties/create',
          method: this.isEdit ? 'put' : 'post',
          data: {
            ...this.formData,
            content: JSON.stringify(this.formData.content)
          }
        }).then(() => {
          this.$message({
            type: 'success',
            message: '保存成功'
          });
          this.$router.back()
          this.btnLoading = false
        }).catch(err => {
          console.log(err);
          this.btnLoading = false
        });
      })
    }
  }
}
</script>
<style lang="scss">
.app-config-edit .jsoneditor-vue .jsoneditor-outer{
  height: 550px;
}
</style>